<template>
  <Dialog v-model="show" title="评论">
    <textarea
      v-model="commentText"
      placeholder="写点什么"
      class="comment-area"
      maxlength="500"
    ></textarea>
    <template #footer>
      <div class="flex flex--e">
        <button class="comment-btn" @click="handleComment">提交</button>
      </div>
    </template>
  </Dialog>
</template>
<script lang="ts" setup>
import Dialog from "@/components/Dialog.vue";
import { computed, toRefs } from "vue";
import { useComment } from "../hooks/useComment";

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  rootId: {
    type: String,
    default: "",
  },
  toCommentId: {
    type: String,
    default: "",
  },
  toCommentUserId: {
    type: String,
    default: "",
  },
});
const { rootId, toCommentId, toCommentUserId } = toRefs(props);
const emit = defineEmits(["update:modelValue", "comment"]);
const show = computed({
  set(val: boolean) {
    emit("update:modelValue", val);
  },
  get() {
    return props.modelValue;
  },
});
const { commentText, onComment } = useComment();
const handleComment = async () => {
  const res = await onComment(
    rootId.value,
    toCommentId.value,
    toCommentUserId.value
  );
  if (res) {
    show.value = false;
    emit("comment");
  }
};
</script>
<style lang="scss" scoped>
.comment-area {
  border: 1px solid #ddd;
  width: 100%;
  font-size: 14px;
  padding: 15px;
  min-height: 180px;
  resize: none;
  outline: none;
  border-radius: 4px;
  background-image: url("http://img.xjlyh.site/2023/09/10/0aa182d26ad342eabf8d3a505453fe9d.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 100%;
  margin-bottom: 10px;
}
.left-btn {
  font-size: 18px;
  .emoji-icon {
    font-size: 20px;
    cursor: pointer;
    font-weight: bold;
  }
}
.comment-btn {
  height: 32px;
  width: 70px;
  background: rgb(131, 123, 199);
  border-radius: 5px;
  text-align: center;
  color: #fff;
  border: none;
  line-height: 32px;
  cursor: pointer;
}
</style>
